<template>
    <ul class="tqfxbox">
        <li>
            <div class="title">累计积雨分析</div>
            <div class="item">
                <i class="qi-306"></i>
                <b>{{framStore.weacherFarmItem.accRainfall}}</b><span>mm</span>
            </div>
            <div class="item item2">
                <template v-if="framStore.weacherFarmItem.accRainfall>framStore.weacherFarmItem.accRainfallLastyear">
                    比去年同期高 {{ framStore.weacherFarmItem.accRainfall-framStore.weacherFarmItem.accRainfallLastyear }} <span>mm</span>
                    <el-icon color="#036f15"><Top /></el-icon>
                </template>
                <template>
                    比去年同期低 {{ framStore.weacherFarmItem.accRainfallLastyear-framStore.weacherFarmItem.accRainfall }} <span>mm</span>
                    <el-icon color="#a30808"><Bottom /></el-icon>
                </template>
            </div>
        </li> 
        <li>
            <div class="item">
                <div class="title">有效积温分析</div>
                <!-- <el-icon :size="18"><Pouring /></el-icon> -->
                <i class="qi-low-temperature-damage"></i>
                <b>{{framStore.weacherFarmItem.accTemp}}</b><span>°C</span>
            </div>
            <div class="item item2">
                <template v-if="framStore.weacherFarmItem.accTemp>framStore.weacherFarmItem.accTempLastyear">
                    比去年同期高 {{ framStore.weacherFarmItem.accTemp-framStore.weacherFarmItem.accTempLastyear }} <span>mm</span>
                    <el-icon color="#036f15"><Top /></el-icon>
                </template>
                <template>
                    比去年同期低 {{ framStore.weacherFarmItem.accTempLastyear-framStore.weacherFarmItem.accTemp }} <span>mm</span>
                    <el-icon color="#a30808"><Bottom /></el-icon>
                </template>
            </div>
        </li>
    </ul>
</template>
<script setup>
import {ref} from "vue"
import { useFramStore } from '@/pinia/modules/farm'
const framStore = useFramStore()
</script>
<style lang="scss" scoped>
.tqfxbox{
    display: flex;
    margin: 10px 0;
    background-color: #f8f9f9;
    border: 1px solid #eef0ef;
    padding: 40px 0 20px 0;
    li{
        position: relative;
        z-index: 10;
        flex: 1;
        text-align: center;
        line-height: 24px;
        &+li{
            border-left: 1px solid #d7d8d8;
        }
        .item{
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            
            b{
                color: #333;
                font-size: 14px;
                padding: 0 4px 0 5px;

            }
            span{
                color: #999;
                padding: 0 4px 0 0;
            }
            &.item2{
                color: #333;
            }
        }
        .title{
            position: absolute;
            z-index: 10;
            left: 20px;
            top: -30px;
            font-size: 12px;
        }
    }
}
</style>